<template>
    <h1 style="text-align: center;">分销海报</h1>
    <div style="width: 100%;">
        <van-image
        :src="poster"
    />
    </div>
        <van-cell-group inset>
            <van-field
                v-model="link" 
                readonly
            >
              <template #button>
                <van-button size="small" type="primary" @click="copy">点击复制</van-button>
              </template>
            </van-field>
          </van-cell-group>
          <van-button type="primary" size="large" @click="getPoster">重新生成海报</van-button>
    <Tabbar />
</template>
<script setup>
    const {proxy} = getCurrentInstance()
    const link = ref('')
    const poster = ref('')
    onBeforeMount(async() => {
        let result = await proxy.$GET({
            url:'/business/poster'
        })
        link.value = location.origin+'/#'+result.data.link
        poster.value = result.data.poster
    })
    import useClipboard from 'vue-clipboard3';
    const { toClipboard } = useClipboard();
    const copy = async()=>{
        let result = await toClipboard(link.value);
        if(result.text){
            showSuccessToast({
                message: '复制成功',
                duration: 1000,
            })
        }else{
            showFailToast({
                message: '复制失败',
                duration: 1000,
            })
        }
    }
    const getPoster = async()=>{
        let result = await proxy.$PUT({
            url:'/business/poster',
        })
        poster.value = result.data.poster
    }
</script>
<style scoped>
    @import url('/assets/css/SaleMoney.css');
</style>